﻿<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Controls="using:App2.Controls"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
    x:Class="App2.MainPage"
    mc:Ignorable="d">
	<Page.Resources>
		<Storyboard x:Name="Storyboard1">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse">
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="202"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:3" Value="203"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ellipse">
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="2"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="74.5"/>
				<EasingDoubleKeyFrame KeyTime="0:0:3" Value="75"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</Page.Resources>
    <Page.DataContext>
        <local:ViewModel/>
    </Page.DataContext>

	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="VisualStateGroup">
				<VisualStateGroup.Transitions>
					<VisualTransition GeneratedDuration="0:0:0.5"/>
				</VisualStateGroup.Transitions>
				<VisualState x:Name="GreenUpState">
					<Storyboard>
						<DoubleAnimation Duration="0" To="0.608" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="path" d:IsOptimized="True"/>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="RedUpState">
					<Storyboard>
						<DoubleAnimation Duration="0" To="150" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="path" d:IsOptimized="True"/>
						<DoubleAnimation Duration="0" To="0.518" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="path" d:IsOptimized="True"/>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>

		<Grid>
			<Grid.RowDefinitions>
				<RowDefinition Height="31*"/>
				<RowDefinition Height="33*"/>
			</Grid.RowDefinitions>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="321*"/>
				<ColumnDefinition Width="360*"/>
				<ColumnDefinition Width="351*"/>
				<ColumnDefinition Width="334*"/>
			</Grid.ColumnDefinitions>

    		<!-- Incremental Update Behavior -->
			<Grid x:Name="grid" Width="250" Margin="42,156,29,45" Grid.Row="1" Background="#FF6B68B2">
				<Image>
					<Interactivity:Interaction.Behaviors>
						<Core:IncrementalUpdateBehavior Phase="3" />
					</Interactivity:Interaction.Behaviors>
				</Image>
				<TextBlock Text="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. " Margin="15" TextWrapping="Wrap">
					<Interactivity:Interaction.Behaviors>
						<Core:IncrementalUpdateBehavior Phase="2" />
					</Interactivity:Interaction.Behaviors>
				</TextBlock>
				<StackPanel VerticalAlignment="Bottom">
					<StackPanel.Background>
						<SolidColorBrush Color="White" Opacity="0.795"/>
					</StackPanel.Background>
					<TextBlock Text="Title" Margin="15,15,15,0" Style="{StaticResource TitleTextBlockStyle}" Foreground="Black">
						<Interactivity:Interaction.Behaviors>
							<Core:IncrementalUpdateBehavior Phase="1" />
						</Interactivity:Interaction.Behaviors>
					</TextBlock>
					<TextBlock Text="SubTitle" Margin="15,0,15,15" Foreground="Black">
						<Interactivity:Interaction.Behaviors>
							<Core:IncrementalUpdateBehavior Phase="1" />
						</Interactivity:Interaction.Behaviors>
					</TextBlock>
				</StackPanel>
			</Grid>

			<!-- Change Property Action -->
			<Button Content="Red" HorizontalAlignment="Left" Height="90" Margin="39,138,0,0" VerticalAlignment="Top" Width="117">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Core:ChangePropertyAction TargetObject="{Binding ElementName=rectangle}" PropertyName="Fill">
							<Core:ChangePropertyAction.Value>
								<SolidColorBrush Color="Red"/>
							</Core:ChangePropertyAction.Value>
						</Core:ChangePropertyAction>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<Button Content="Green" HorizontalAlignment="Left" Height="90" Margin="155,138,0,0" VerticalAlignment="Top" Width="117">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Core:ChangePropertyAction TargetObject="{Binding ElementName=rectangle}" PropertyName="Fill">
							<Core:ChangePropertyAction.Value>
								<SolidColorBrush Color="#FF23FF00"/>
							</Core:ChangePropertyAction.Value>
						</Core:ChangePropertyAction>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<Rectangle x:Name="rectangle" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="102" Margin="42,230,0,0" Stroke="Black" VerticalAlignment="Top" Width="227"/>

			<!-- Call Method Action -->
			<Button Content="Refresh Data" Grid.Column="1" HorizontalAlignment="Left" Height="84" Margin="61,144,0,0" VerticalAlignment="Top" Width="246">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Core:CallMethodAction TargetObject="{Binding Mode=OneWay}" MethodName="RefreshData"/>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<TextBlock Grid.Column="1" HorizontalAlignment="Left" Height="52" Margin="64,233,0,0" TextWrapping="Wrap" Text="{Binding RefreshInfo}" VerticalAlignment="Top" Width="240"/>

			<!-- go to state action -->
			<Button Content="Green Up" Grid.Column="3" HorizontalAlignment="Left" Height="81" Margin="42,147,0,0" VerticalAlignment="Top" Width="130">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Core:GoToStateAction StateName="GreenUpState"/>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<Button Content="Red Up" Grid.Column="3" HorizontalAlignment="Left" Height="81" Margin="171,147,0,0" VerticalAlignment="Top" Width="130">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Core:GoToStateAction StateName="RedUpState"/>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<Path x:Name="path" Stretch="Uniform" Data="F1 M 43.7873,12.009L 31.0407,18.1L 35.5027,4.69604L 27.0468,16.013L 24.7685,2.07077L 22.5404,16.0211L 14.0438,4.73462L 18.554,18.1225L 5.78558,12.0774L 16.0008,21.8357L 1.88559,22.4168L 15.4656,26.3102L 3.23731,33.3844L 17.0712,30.5208L 9.53108,42.4675L 20.4496,33.503L 19.3251,47.5853L 24.827,34.5736L 30.3756,47.5655L 29.2004,33.4873L 40.1511,42.4124L 32.5681,30.493L 46.4122,33.3067L 34.1585,26.2766L 47.7244,22.3344L 33.6073,21.8041L 43.7873,12.009 Z " Grid.Column="3" Margin="140.816,249.221,109.816,40" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5">
				<Path.RenderTransform>
					<CompositeTransform/>
				</Path.RenderTransform>
				<Path.Fill>
					<LinearGradientBrush StartPoint="0.406768,1.00481" EndPoint="1.41183,1.00481">
						<LinearGradientBrush.RelativeTransform>
							<TransformGroup>
								<SkewTransform CenterX="0.406768" CenterY="1.00481" AngleX="-0.142878" AngleY="0"/>
								<RotateTransform CenterX="0.406768" CenterY="1.00481" Angle="-79.7896"/>
							</TransformGroup>
						</LinearGradientBrush.RelativeTransform>
						<GradientStop Color="#FFFF0000" Offset="0"/>
						<GradientStop Color="#FF04FF00" Offset="1"/>
					</LinearGradientBrush>
				</Path.Fill>
			</Path>
			<Button Content="Red" Grid.Column="2" HorizontalAlignment="Left" Height="84" Margin="59,141,0,0" VerticalAlignment="Top" Width="112">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Core:InvokeCommandAction Command="{Binding ChangeColorCommand, Mode=OneWay}" CommandParameter="Red" />
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<Rectangle x:Name="rectangle_Copy" HorizontalAlignment="Left" Height="102" Margin="62,230,0,0" VerticalAlignment="Top" Width="227" Grid.Column="2" Fill="{Binding Color}"/>
			<Button Content="Green" Grid.Column="2" HorizontalAlignment="Left" Height="84" Margin="180,141,0,0" VerticalAlignment="Top" Width="112">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Core:InvokeCommandAction Command="{Binding ChangeColorCommand, Mode=OneWay}" CommandParameter="Green" />
						<Core:InvokeCommandAction/>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<TextBlock HorizontalAlignment="Left" Height="126" Margin="30,10,0,0" TextWrapping="Wrap" Text="Change Property" VerticalAlignment="Top" Width="239" Style="{StaticResource HeaderTextBlockStyle}" LineHeight="53.333"/>
			<TextBlock HorizontalAlignment="Left" Height="126" Margin="64,10,0,0" TextWrapping="Wrap" Text="Call Method" VerticalAlignment="Top" Width="239" Style="{StaticResource HeaderTextBlockStyle}" LineHeight="53.333" Grid.Column="1"/>
			<TextBlock HorizontalAlignment="Left" Height="126" Margin="62,10,0,0" TextWrapping="Wrap" Text="Invoke Command" VerticalAlignment="Top" Width="279" Style="{StaticResource HeaderTextBlockStyle}" LineHeight="53.333" Grid.Column="2"/>
			<TextBlock HorizontalAlignment="Left" Height="126" Margin="45,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="279" Style="{StaticResource HeaderTextBlockStyle}" LineHeight="53.333" Grid.Column="3">
				<Run Text="Go to"/>
				<LineBreak/>
				<Run Text="State"/>
			</TextBlock>
			<TextBlock HorizontalAlignment="Left" Height="126" Margin="64,25,0,0" TextWrapping="Wrap" Text="Navigate to Page" VerticalAlignment="Top" Width="239" Style="{StaticResource HeaderTextBlockStyle}" LineHeight="53.333" Grid.Column="1" Grid.Row="1"/>
			<TextBlock HorizontalAlignment="Left" Height="126" Margin="62,25,0,0" TextWrapping="Wrap" Text="Play a Sound" VerticalAlignment="Top" Width="239" Style="{StaticResource HeaderTextBlockStyle}" LineHeight="53.333" Grid.Column="2" Grid.Row="1"/>
			<TextBlock HorizontalAlignment="Left" Height="126" Margin="59,25,0,0" TextWrapping="Wrap" Text="Control Storyboard" VerticalAlignment="Top" Width="265" Style="{StaticResource HeaderTextBlockStyle}" LineHeight="53.333" Grid.Column="3" Grid.Row="1"/>
			<Button Content="Go to page 2" Grid.Column="1" HorizontalAlignment="Left" Height="76" Margin="63,153,0,0" Grid.Row="1" VerticalAlignment="Top" Width="241">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Core:NavigateToPageAction TargetPage="App2.Page2"/>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<Button Content="Ding!" Grid.Column="2" HorizontalAlignment="Left" Height="76" Margin="63,153,0,0" Grid.Row="1" VerticalAlignment="Top" Width="241">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Media:PlaySoundAction Source="Assets/DING.wav"/>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<Button Content="Play / Pause" Grid.Column="3" HorizontalAlignment="Left" Height="76" Margin="56,153,0,0" Grid.Row="1" VerticalAlignment="Top" Width="123">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Media:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}" ControlStoryboardOption="TogglePlayPause"/>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<Button Content="Stop" Grid.Column="3" HorizontalAlignment="Left" Height="76" Margin="178,153,0,0" Grid.Row="1" VerticalAlignment="Top" Width="123">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Media:ControlStoryboardAction ControlStoryboardOption="Stop" Storyboard="{StaticResource Storyboard1}"/>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<Ellipse x:Name="ellipse" Grid.Column="3" Fill="#FF0CFF00" HorizontalAlignment="Left" Height="45" Margin="59,258,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="45" RenderTransformOrigin="0.5,0.5">
				<Ellipse.RenderTransform>
					<CompositeTransform/>
				</Ellipse.RenderTransform>
			</Ellipse>
			<TextBlock HorizontalAlignment="Left" Height="126" Margin="53,25,0,0" TextWrapping="Wrap" Text="Incremental Update" VerticalAlignment="Top" Width="295" Style="{StaticResource HeaderTextBlockStyle}" LineHeight="53.333" Grid.Row="1" Grid.ColumnSpan="2"/>

		</Grid>

	</Grid>
</Page>
